<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <b></b>
         <a href=""><div></div></a>
         <p></p>
      </div>
    <script>
     
 
      // 操作节点
      // var a=document.querySelector('a');
      // 获取父节点
      // console.dir(a.parentNode);

      // 获取子节点
      // console.dir(a.childNodes);

      // 获取子元素
      // console.dir(a.children);

      // 获取兄弟节点
      // 上一个
      // console.dir(a.previousSibling);
      // 下一个
      // console.dir(a.nextSibling);

      // 获取兄弟元素
      // 上一个
      // console.dir(a.previousElementSibling);
      // 下一个
      // console.dir(a.nextElementSibling);




      // 创建节点
      // 元素
      //var b=  document.createElement("strong")
      // console.dir(b)

      // 文本
      // var b= document.createTextNode("a");
      // console.dir(b)

      // 文档
      // var b= document.createDocumentFragment("div")
      // console.dir(b)

      // 1.添加节点         使用createElement和appendChild尾部添加节点
      // var b=document.querySelector('div');
      // var c=document.createElement('h1');
      // c.textContent='添加节点';
      // b.appendChild(c)
      // 2.添加节点        使用createElement和insertBefore在头部添加节点
      // var b=document.querySelector('div');
      // var a=document.querySelector('a');
      // var c=document.createElement('p');
      // c.textContent='添加节点';
      // b.insertBefore(c,a);//参数一：插入的新节点；参数二：参照的节点
      
      // 删除节点 removeChild方法
      // 找到要删除的节点，通过parentNode找到它的父节点，然后调用removeChild删除指定节点
      // var a=document.querySelector('a');
      // a.parentNode.removeChild(a);   // a.remove();   // 删除指定的节点
      
      // 克隆节点   cloneNode(boolean) 参数控制浅拷贝还是深拷贝
      // var a=document.querySelector('a');
      // var b=a.cloneNode(true);
      // document.body.appendChild(b);
    </script>
    
</body>
</html>